/**
 * 时间区间输入组件
 * Created by trj on 2019/8/9
 */
import React, { useState } from "react";
import { DatePicker } from "antd";

const DateRange = (props) => {
  const [start, setStart] = useState(props.value[0] || null);
  const [end, setEnd] = useState(props.value[1] || null);
  const onDateStartChange = (val) => {
    setStart(val);
    props.onChange && props.onChange([val, end]);
  };
  const onDateEndChange = (val) => {
    setEnd(val);
    props.onChange && props.onChange([start, val]);
  };

  return (
    <div className="date-range">
      <DatePicker
        format="YYYY-MM-DD"
        disabledDate={props.disabledDateStart}
        placeholder="请选择日期"
        value={start}
        onChange={onDateStartChange}
      />
      <span style={{ padding: "0 4px" }}>-</span>
      <DatePicker
        format="YYYY-MM-DD"
        disabledDate={props.disabledDateEnd}
        placeholder="请选择日期"
        value={end}
        onChange={onDateEndChange}
      />
    </div>
  );
};

export default DateRange;
